<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1">
            <el-button class="b1" type="primary" size="mini" @click="BthSaveGoodsSorts()">新增办公用品库</el-button>  
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsSortsName"  @keyup.enter.native="submitSerch" placeholder="请输入办公用品库名称" style="width:155px" size="mini"></el-input>
        </div>
       <!-- 主体部分 -->
    <div class="div2">
        <el-table v-loading="loading" :data="pageGoodsSorts.list">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="办公用品库名称" prop="goodsSortsName" :show-overflow-tooltip="true" />
            <el-table-column label="存放地点" prop="goodsSortsLocation" :show-overflow-tooltip="true" />
            <el-table-column label="备注" prop="goodsSortsNodes" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="goodsSortsUpdate(scope.row)"
                    v-hasPermi="['system:notice:edit']"
                    >编辑</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="goodsSortsDelete(scope.row)"
                    v-hasPermi="['system:notice:remove']"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageGoodsSorts.pageNum"
        :limit.sync="pageGoodsSorts.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="listGoodsSorts"
        />
    </div>

    <div class="dig">
        <el-dialog :title="title" :visible.sync="open">
            <el-form :model="goodsSorts" label-width="120px" size="mini" >
                <el-form-item label="办公用品库名称:">
                    <el-input v-model="goodsSorts.goodsSortsName" placeholder="请输入办公用品库" />
                </el-form-item>
                <el-form-item label="存放地点:">
                    <el-input v-model="goodsSorts.goodsSortsLocation" placeholder="请输入存放地点" />
                </el-form-item>
                 <el-form-item label="备注:">
                    <el-input v-model="goodsSorts.goodsSortsNodes" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <template>
                        <el-button type="primary" @click="saveGoodsSortss()">保存</el-button>
                        <el-button type="" @click="clear()">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div> 
</div>
</template>

<script>
import { goodsSortsList , saveGoodsSorts , deleteGoodsSorts } from "@/api/administration/goodsSorts/goodsSorts";
export default {
    name: 'RuoyiUiIndex',
    data() {
        return {
            loading:true,
            title:"",
            open:false,
            pageGoodsSorts:{
                pageNum:1,
                pageSize:8,
            },
            total:0,
            searchInfo:{searchGoodsSortsName:'',},
            goodsList:[],
            goodsSorts:{
                goodsSortsName:"",
                goodsSortsLocation:"",
                goodsSortsNodes:"",
            },
        };
    },

    mounted() {
        this.listGoodsSorts();
    },

    methods: {
        // 展示办公用品库信息
        listGoodsSorts(){
            this.loading = true;
            this.goodsSorts.goodsSortsName = this.searchInfo.searchGoodsSortsName;
            this.goodsSorts.pageNum = this.pageGoodsSorts.pageNum;
            this.goodsSorts.pageSize = this.pageGoodsSorts.pageSize;
            goodsSortsList(this.goodsSorts).then(rel=>{
                this.pageGoodsSorts = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
        },
        // 点击新增按钮
        BthSaveGoodsSorts(){
            this.title = "添加办公用品库";
            this.open = true;
        },
        saveGoodsSortss(){
            saveGoodsSorts(this.goodsSorts).then(rel=>{
                if(rel.code >= 200){
                    this.$modal.msgSuccess("保存成功");
                }else{
                    this.$modal.msgSuccess("保存失败");
                }
                this.open = false;
                this.listGoodsSorts();
            })
        },
        //修改办公物品分类
        goodsSortsUpdate(row){
            this.open = true;
            this.goodsSorts = JSON.parse(JSON.stringify(row));
        },
        //删除办公物品
        goodsSortsDelete(row){
            this.goodsSorts.goodsSortsId = row.goodsSortsId;
            this.goodsSorts.delFlag = 2;
            this.$confirm('是否确认删除物品名称为'+ this.goodsSorts.goodsSortsName+'的数据项?','提示信息').then(()=>{
                deleteGoodsSorts(this.goodsSorts).then(rel=>{
                    if(rel.code >= 200){
                        this.$modal.msgSuccess("删除成功");
                        this.listGoodsSorts();
                    }
                })
            }).catch(()=>{
                this.$modal.msgSuccess("取消删除");
                this.listGoodsSorts();
            })
        },
        //多条件查询
        submitSerch(){
            this.pageGoodsSorts.pageNum = 1;
            this.listGoodsSorts();
        },
        //取消
        clear(){
            this.open = false;
        },
    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 800px 10px 32px;   
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin: 20px;
    }
</style>